<template>
	<view class="root-container">
		<view class="cesaa">
			<scroll-view scroll-x style="display: flex; white-space: nowrap;">
				<view class="item" @click="shang(0)" >
					上一页
				</view>
				<view v-for="(item, index) in arr22" :key="index" :data-index="index"
					:class="{select: selectTyae === index}" class="item" @tap="tiaozdf(item,index)">
					{{ item.name }}
				</view>
				<view class="item"  @click="shang(1)" >
					下一页
				</view>
			</scroll-view>
		</view>

		<view class="container">
			<view class="page_first"></view>
			<view class="page_last">
				<view v-for="(item, index) in imgArr" :key="index"
					:class="['photo_item', item.isturn ? 'left' : 'right', 'zindex' + item.zIndex]" :data-index="index"
					@longpress="changsans(imgArr,index)" :data-url="item.src" @tap="change" @transitionend="finish">
					<image :src="item.url" @load="imageLoad" mode="widthFix" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../api/index.js'
	import api from '../../api/Channel.js'
	export default {
		data() {
			return {
				imgArr: [],
				arr22: [],
				selectTyae: 0,
				mutext: '第一册',
				jiazai: 0,
				index: '',
				pageNum: 1,
			};
		},
		methods: {
			async shang(index){
				if(index == 0){
					this.pageNum--
					this.pageNum = this.pageNum
					let obj = {
						data: {
							"pageNum": this.pageNum,
							"pageSize": 3
						},
						url: api.ctrl + '/sample-books',
						method: "GET",
					}
					let res = await request(obj)
				
					this.arr22 = res.data.list
					this.index = this.arr22[0].id
					this.dianjix()
				}else{
					this.pageNum++
					this.pageNum = this.pageNum
					let obj = {
						data: {
							"pageNum": this.pageNum,
							"pageSize": 3
						},
						url: api.ctrl + '/sample-books',
						method: "GET",
					}
					let res = await request(obj)
					console.log(res)	
					this.arr22 = res.data.list
					this.index = this.arr22[0].id
					this.dianjix()
				}
			},
			tiaozdf(item,index){
				this.selectTyae = index
				this.index = item.id 
				this.dianjix()
			},
			async dianjix() {
				let obj = {
					url: api.ctrl + `/sample-books/${this.index}`,
					method: "GET",
				}
				let res = await request(obj)
				console.log(res)
				this.imgArr = res.data.images
			},
			async shengce() {
				let obj = {
					data: {
						"pageNum": 1,
						"pageSize": 3

					},
					url: api.ctrl + '/sample-books',
					method: "GET",
				}
				let res = await request(obj)
				console.log(res)
				this.arr22 = res.data.list
				this.index = this.arr22[0].id
				this.dianjix()
			},
			bindMultiPickerChange(e) {


			},
			imageLoad(e) {
				if (e.type === 'load') {
					this.jiazai += 1;
				}
				if (this.jiazai === this.imgArr.length) {
					// this.$u.hideLoading();
				}
			},
			change(e) {
				const index = e.currentTarget.dataset.index;
				let imgs = [...this.imgArr];
				imgs.forEach((item, i) => {
					if (index === i) {
						item.isturn = !item.isturn;
						item.zIndex = 3;
					} else {
						item.zIndex = 1;
					}
				});

				if (index - 1 >= 0) {
					imgs[index - 1].zIndex = 2;
				}

				if (index + 1 < imgs.length) {
					imgs[index + 1].zIndex = 2;
				}

				this.imgArr = imgs;
			},
			changsans(item,index) {
				let arr = [];
				item.forEach(el=>{
					console.log(el.url)
					arr.push(el.url)
				})
				console.log(arr)
				uni.previewImage({
					urls: arr,
					current: arr[index]
				});
			},
			finish() {
				this.flag = true;
			},
		},
		onLoad() {
			this.shengce();
			return
			this.$u.showLoading({
				title: '加载图片中...'
			});
		},
	};
</script>

<style scoped>
	.root-container {
		display: flex;
		flex-direction: column;
	}

	.container {
		width: 140%;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: rotate(90deg);
		position: absolute;
		top: 30%;
		left: 0%;
	}

	.page_first,
	.page_last {
		width: 50%;
		height: 480rpx;
	}

	.page_first {
		display: flex;
		box-sizing: border-box;
		padding: 0 20rpx;
		text-align: center;
	}

	.page_last {
		position: relative;
	}

	.photo_item {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		box-sizing: border-box;
		border: 1rpx solid #eee;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.left,
	.right {
		transform-style: preserve-3d;
		transform-origin: 0% center;
		perspective: 1000;
		transition: all 1s ease-in-out;
	}

	.left {
		transform: perspective(2000rpx) rotateY(-180deg);
	}

	.right {
		transform: perspective(2000rpx) rotateY(0deg);
	}

	.zindex1 {
		z-index: 1;
	}

	.zindex2 {
		z-index: 2;
	}

	.zindex3 {
		z-index: 3;
	}

	.cesaa {
		width: 100vw;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-weight: 700;
	}

	.select {
		background-color: #FFE2E3 !important;
		color: #FF353B !important;
	}

	.item {
		display: inline-block;
		width: 20vw;
		padding: 0;
		font-size: 25rpx;
		text-align: center;
	}
</style>